<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-03-28 14:38:51
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-03-28 14:39:57
 * @Description:
 *
-->

<template>
  <MyContainer class="container">
    <MyHeader class="header">
      <p style="width: 60px" size="medium">云服务商</p>
      <el-select v-model="value01" @change="CloudAccountNameChanged" placeholder="请选择">
        <el-option
          v-for="item in clusterAll"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
      <p style="margin-left: 10px;width: 50px" size="medium">云账号</p>
      <el-select v-model="value02" placeholder="请选择">
        <template v-if="value01 == '阿里云'">
          <el-option
            v-for="item in PublicCloudAccountName.data.data"
            :key="item.cpId"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName" />
        </template>
        <template v-if="value01 == 'Openstack'">
          <el-option
            v-for="item in PrivateCloudAccountName.data.data"
            :key="item.cpId"
            :label="item.cloudAccountName"
            :value="item.cloudAccountName" />
        </template>
      </el-select>
      <p style="margin-left: 10px;width: 60px" size="medium">资源类型</p>
      <el-select v-model="value03" placeholder="请选择">
        <el-option
          v-for="item in options01"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
      <p style="margin-left: 10px;width: 40px" size="medium">实例</p>
      <el-select v-model="value04" placeholder="请选择">
        <template v-if="value01 == '阿里云'">
          <el-option
            v-for="item in ALiVMList"
            :key="item.id"
            :label="item.vmName"
            :value="item.id" />
        </template>
        <template v-if="value01 == 'Openstack'">
          <el-option
            v-for="item in OpenstackVMList"
            :key="item.id"
            :label="item.vmName"
            :value="item.id" />
        </template>
      </el-select>
      <p style="margin-left: 10px;width: 40px" size="medium">时间</p>
      <el-select v-model="value05" placeholder="请选择">
        <el-option
          v-for="item in options02"
          :key="item.value"
          :label="item.label"
          :value="item.label" />
      </el-select>
      <el-button
        style="margin-left: 10px"
        size="medium"
        type="primary"
        @click="getList"
      >查询</el-button>
    </MyHeader>
    <MyMain class="main">
      <div id="myChart1" style="width:48%;height:340px;float:left;" />
      <div id="myChart2" style="margin-left: 4%;width:48%;height:340px;float:left;" />
      <div id="myChart3" style="margin-top: 10px;margin-bottom: 10px;width:48%;height:340px;float:left;" />
      <div id="myChart4" style="margin-top: 10px;margin-bottom: 10px;margin-left: 4%;width:48%;height:340px;float:left;" />
    </MyMain>
  </MyContainer>
</template>

<script>
import MyContainer from '@/components/Layout/MyContainer.vue'
import MyHeader from '@/components/Layout/MyHeader.vue'
import MyMain from '@/components/Layout/MyMain.vue'
import { CLUSTER_ALL } from '@/utils/constant.js'
import { getDetailUsage } from '@/api/monitor'
import { getPublicTokenList } from '@/api/cn-mgmt.js'
import { getPrivateAccountList } from '@/api/cn-mgmt'
import { getVMList } from '@/api/cn-resource'
import * as echarts from 'echarts'
export default {
  name: 'DetailUsage',
  components: {
    MyContainer,
    MyHeader,
    MyMain
  },
  data() {
    return {
      myChart1: '',
      clusterAll: CLUSTER_ALL,
      tabledata: [],
      PublicCloudAccountName: [],
      PrivateCloudAccountName: [],
      VMList: [],
      ALiVMList: [],
      OpenstackVMList: [],
      DetailUsage: [],
      xAxisData01: [],
      yAxisData01: [],
      xAxisData02: [],
      yAxisData02: [],
      xAxisData03: [],
      yAxisData03: [],
      xAxisData04: [],
      yAxisData04: [],
      options01: [{
        value: '云主机',
        label: '云主机'
      }],
      options02: [{
        value: '选项1',
        label: '1小时'
      }, {
        value: '选项2',
        label: '1天'
      }, {
        value: '选项3',
        label: '1星期'
      }, {
        value: '选项4',
        label: '1月'
      }],
      value01: '',
      value02: '',
      value03: '云主机',
      value04: '',
      value05: '1小时'
    }
  },
  created() {
    getPublicTokenList({
      keyword: this.searchKey,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then((data) => {
      this.PublicCloudAccountName = data
    })
    getPrivateAccountList({
      keyword: this.searchKey,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then((data) => {
      this.PrivateCloudAccountName = data
    })
    getVMList({
      keyword: this.searchKey,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    }).then((data) => {
      this.VMList = data
      this.changedata()
      this.value01 = CLUSTER_ALL[0].value
      this.value02 = this.PublicCloudAccountName.data.data[0].cloudAccountName
      this.value04 = this.ALiVMList[0].id
      this.getList()
    })
  },
  methods: {
    changedata() {
      for (const item of this.VMList.data.data) {
        if (item.cloudProvider === '阿里云') {
          this.ALiVMList.push(item)
        } else {
          this.OpenstackVMList.push(item)
        }
      }
    },
    drawchart1() {
      this.xAxisData01 = []
      this.yAxisData01 = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart1'))
        myChart.clear()
      }
      else {
        for (const item of this.list[0].points) {
          this.xAxisData01.push(item.x)
          this.yAxisData01.push(item.y)
        }
        var myChart = echarts.init(document.getElementById('myChart1'))
        myChart.clear()
        myChart.setOption({
          title: {
            text: this.list.length ? this.list[0].title : ''
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '5%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData01,
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} %",
            },
          },
          series: [
            {
              name: this.list[0].title,
              type: 'line',
              step: 'start',
              data: this.yAxisData01
            }
          ]
        })
      }
    },
    drawchart2() {
      this.xAxisData02 = []
      this.yAxisData02 = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart2'))
        myChart.clear()
      }
      else {
        for (const item of this.list[1].points) {
          this.xAxisData02.push(item.x)
          this.yAxisData02.push(item.y)
        }
        var myChart = echarts.init(document.getElementById('myChart2'))
        myChart.clear()
        myChart.setOption({
          title: {
            text: this.list.length ? this.list[1].title : ''
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '6%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData02
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} %",
            },
          },
          series: [
            {
              name: this.list[1].title,
              type: 'line',
              step: 'start',
              data: this.yAxisData02
            }
          ]
        })
      }
    },
    drawchart3() {
      this.xAxisData03 = []
      this.yAxisData03 = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart3'))
        myChart.clear()
      }
      else {
        for (const item of this.list[2].points) {
          this.xAxisData03.push(item.x)
          this.yAxisData03.push(item.y)
        }
        var myChart = echarts.init(document.getElementById('myChart3'))
        myChart.clear()
        myChart.setOption({
          title: {
            text: this.list.length ? this.list[2].title : ''
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '6%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData03
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} Kb/s",
            },
          },
          series: [
            {
              name: this.list[2].title,
              type: 'line',
              step: 'start',
              data: this.yAxisData03
            }
          ]
        })
      }
    },
    drawchart4() {
      this.xAxisData04 = []
      this.yAxisData04 = []
      if (this.list.length == 0) {
        var myChart = echarts.init(document.getElementById('myChart4'))
        myChart.clear()
      }
      else {
        for (const item of this.list[3].points) {
          this.xAxisData04.push(item.x)
          this.yAxisData04.push(item.y)
        }
        var myChart = echarts.init(document.getElementById('myChart4'))
        myChart.clear()
        myChart.setOption({
          title: {
            text: this.list.length ? this.list[3].title : ''
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '5%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: this.xAxisData04
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: "{value} Kb/s",
            },
          },
          series: [
            {
              name: this.list[3].title,
              type: 'line',
              step: 'start',
              data: this.yAxisData04
            }
          ]
        })
      }
    },
    handleRequest(caller, params) {
      caller(params)
        .then((res) => {
          if (res.data) {
            this.list = Array.isArray(res.data.items) ? res.data.items : []
            this.drawchart1()
            this.drawchart2()
            this.drawchart3()
            this.drawchart4()
          } else {
            // 数据为空处理
            this.list = []
          }
          this.extraHandleSuccessResp(res)
        })
        .finally(() => {
          this.loading = false
        })
    },
    getList() {
      this.handleRequest(getDetailUsage, {
        cloudProvider: this.value01,
        cloudAccountName: this.value02,
        interval: this.value05,
        resourceType: this.value03,
        vmId: this.value04
      })
    },
    CloudAccountNameChanged(){
      if (this.value01 == 'Openstack') {
        this.value02 = this.PrivateCloudAccountName.data.data[0].cloudAccountName
        this.value04 = this.OpenstackVMList[0].id
      }
      else if (this.value01 == '阿里云') {
        this.value02 = this.PublicCloudAccountName.data.data[0].cloudAccountName
        this.value04 = this.ALiVMList[0].id
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.detail-usage-ctn {
}
</style>
